<template>
  <div class="signature">
    <div class="inputs" v-if="!popup">
      <div class="label" :class="required ? 'labelqr' : ''">{{ label }}</div>
      <div>
        <div v-if="value" class="images">
          <image @tap="toImg" class="images" mode="aspectFit" :src="value"></image>
          <view v-if="!readonly" @click="toDeleteImg" class="icons">
            <view class="Deletes">×</view>
          </view>
        </div>
        <div v-if="!value && !readonly" class="explain" @click="toPop">
          {{ placeholder ? placeholder : '点击签名' }}
        </div>
      </div>
    </div>
    <view class="bottomPopup" v-if="showPopup" @touchmove.stop.prevent="moveHandle">
      <transition name="slide-up" appear>
        <view class="popup-content">
          <view class="popup">
            <div class="hader" v-if="!isHeight">
              <div @click="toclear">取消</div>
              <div class="text">{{ label }}</div>
              <div @click="isEmpty">确定</div>
            </div>
            <div :class="isHeight ? 'wgSignatureq' : 'wgSignature'">
              <div v-if="isHeight" key="999" style="width: 750rpx; height: 100vh">
                <jp-signature
                  :beforeDelay="200"
                  :landscape="true"
                  disableScroll
                  ref="signatureRef"
                  :openSmooth="openSmooth"
                  :penSize="6"
                  :bounding-box="boundingBox"
                ></jp-signature>
              </div>
              <div v-else key="888" style="width: 750rpx; height: 35vh">
                <jp-signature
                  :beforeDelay="200"
                  disableScroll
                  ref="signatureRef"
                  :openSmooth="openSmooth"
                  :bounding-box="boundingBox"
                  :penSize="3"
                ></jp-signature>
              </div>
              <div v-if="!isHeight" class="appBut">
                <div class="buts" @click="undo">撤销</div>
                <div class="buts" @click="deleteImg">清除</div>
                <div class="buts" style="background-color: #55aaff; color: #fff" @click="Tomagnify"
                  >全屏</div
                >
              </div>
              <div v-else class="appBut" style="height: 80px">
                <div class="butx" @click="undo">撤销</div>
                <div class="butx" @click="deleteImg">清除</div>
                <div class="butx" style="background-color: #55aaff; color: #fff" @click="Tomagnify"
                  >小屏</div
                >
                <div class="butx" @click="toclear">取消</div>
                <div class="butx" style="background-color: #e59c36; color: #fff" @click="isEmpty"
                  >完成</div
                >
              </div>
            </div>
          </view>
        </view>
      </transition>
    </view>
  </div>
</template>
<!-- 有项目需要开发的请联系 扣 - 371524845 -->
<script>
/**
 * 手写签名组件
 * 用于手写签名（弹框签名支持小屏和全屏）
 *
 *********参数********
 * label        选项名称
 * value        初始值String（支持bas64，url 等图片显示）
 * required     是否显示必填
 * placeholder  默认值
 * readonly     是否只读
 *
 * *********回调********
 * @input(e)   点击确认   e生成的图片数据(bas64)
 *
 *********方法********
 * isEmpty()     生成图片
 * deleteImg()   删除图片
 */
export default {
  props: {
    popup: {
      type: [Boolean, String],
      default: false
    },
    label: {
      type: String,
      default: '手写签名'
    },
    value: {
      type: String,
      default: ''
    },
    required: {
      type: [Boolean, String],
      default: false
    },
    placeholder: {
      type: String,
      default: '点击签名'
    },
    readonly: {
      type: [Boolean, String],
      default: false
    },
    openSmooth: {
      type: [Boolean, String],
      default: true
    },
    boundingBox: {
      type: [Boolean, String],
      default: true
    }
  },
  data() {
    return {
      showPopup: false,
      isHeight: false,
      height1: uni.getSystemInfoSync().windowWidth / 2,
      width: uni.getSystemInfoSync().windowWidth, //实时屏幕宽度
      height: uni.getSystemInfoSync().windowHeight, //实时屏幕高度
      showPicker: false
    }
  },
  methods: {
    moveHandle() {},
    toImg() {
      this.$emit('toImg', this.value)
    },
    undo() {
      this.$refs.signatureRef.undo()
    },
    toPop() {
      this.showPopup = true
    },
    toDeleteImg() {
      // #ifndef VUE3
      this.$emit('input', '')
      // #endif
      // #ifdef VUE3
      this.$emit('update:value', '')
      // #endif
    },
    toclear() {
      this.isHeight = false
      this.showPopup = false
    },
    close() {
      this.isHeight = false
      this.showPopup = false
      const { signatureRef } = this.$refs
      signatureRef.clear()
    },
    deleteImg() {
      const { signatureRef } = this.$refs
      signatureRef.clear()
    },
    toDataURL(url) {
      // #ifndef VUE3
      this.$emit('input', url)
      // #endif
      // #ifdef VUE3
      this.$emit('update:value', url)
      // #endif
      this.showPicker = false
    },
    Tomagnify() {
      this.isHeight = !this.isHeight
      const { signatureRef } = this.$refs
      signatureRef.clear()
    },
    isEmpty() {
      const { signatureRef } = this.$refs
      signatureRef.canvasToTempFilePath({
        quality: 0.8,
        success: (res) => {
          if (this.required) {
            if (!res.isEmpty) {
              // #ifndef VUE3
              this.$emit('input', res.tempFilePath)
              // #endif
              // #ifdef VUE3
              this.$emit('update:value', res.tempFilePath)
              // #endif
              this.$emit('change', res.tempFilePath)
              this.isHeight = false
              this.showPopup = false
            } else {
              uni.showToast({
                title: '请先签名',
                icon: 'none'
              })
            }
          } else {
            // #ifndef VUE3
            this.$emit('input', res.tempFilePath)
            // #endif
            // #ifdef VUE3
            this.$emit('update:value', res.tempFilePath)
            // #endif
            this.$emit('change', res.tempFilePath)
            this.isHeight = false
            this.showPopup = false
          }
        }
      })
    }
  },
  beforeCreate() {},
  created() {}
}
</script>

<style scoped lang="scss">
.wgSignatureq {
}
.appBut {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: 50px;
  line-height: 35px;
  .buts {
    color: #333;
    flex: 1;
    margin: 0 15px;
    background-color: #ccc;
    border-radius: 5px;
    height: 35px;
  }
  .butx {
    color: #333;
    flex: 1;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 5px;
    height: 35px;
    transform: rotate(90deg);
  }
}

.bottomPopup {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);

  .popup-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    // top: 0;
    background-color: #ffffff;
  }

  .slide-up-enter-active,
  .slide-up-leave-active {
    transition: all 0.3s ease;
  }

  .slide-up-enter,
  .slide-up-leave-to {
    transform: translateY(100%);
  }
}

.signature {
  .inputs {
    background-color: #fff;
    padding: 10px 16px;

    .label {
      line-height: 35px;
      position: relative;
    }

    .labelqr:before {
      content: '*';
      color: #f00;
    }

    .explain {
      width: 100%;
      background-color: #f1f1f1;
      text-align: center;
      line-height: 40px;
      border: 1px dotted #ccc;
      color: #999;
    }

    .Deletes {
      border: 1px solid #f00;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      color: #f00;
      text-align: center;
      font-size: 30rpx;
      line-height: 30rpx;
    }
  }

  .images {
    width: 300rpx;
    height: 150rpx;
    position: relative;

    .icons {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.popup {
  background-color: #fff;
}

.hader {
  display: flex;
  justify-content: center;
  text-align: center;
  height: 45px;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;

  div {
    text-align: center;
    width: 80px;
    color: #e59c36;
  }

  .text {
    color: #333;
    flex: 1;
  }
}
</style>
